<template>
  <div>
    <!-- 头部 -->
    <market-header></market-header>
    <!-- main -->
    <div class="container">
      <!-- 上传商品图片 -->
      <div class="left">
        <rh-upload url="http://localhost:3000/users/upload"
                   :limit="5"
                   @change='change'>
        </rh-upload>
      </div>
      <!-- 填写商品具体信息 -->
      <div class="right">
        <div class="input">
          <label>商品信息</label>
          <rh-input v-model="goodsName"
                    placeholder="请输入商品信息"></rh-input>
        </div>
        <div class="input">
          <label>商品使用情况</label>
          <rh-input v-model="goodsInfo"
                    placeholder="请输入商品使用情况"></rh-input>
        </div>
        <div class="input">
          <label>商品所在学校</label>
          <rh-input v-model="goodsLocation"
                    placeholder="请输入学校"></rh-input>
        </div>
        <div class="input">
          <label>商品购买时间</label>
          <rh-input v-model="goodsTime"
                    placeholder="请输入购买时间"></rh-input>
        </div>
        <div class="input">
          <label>商品剩余数量</label>
          <el-input-number v-model="goodsAmount"
                           :min="1"
                           :max="10000"></el-input-number>
        </div>
        <div class="input">
          <label>商品原始价格</label>
          <rh-input v-model="goodsOrigin"
                    placeholder="请输入原始价格"></rh-input>
        </div>
        <div class="input">
          <label>商品出售价格</label>
          <rh-input v-model="goodsPrice"
                    placeholder="请输入出售价格"></rh-input>
        </div>
        <div class="input">
          <label>商品分类</label>
          <rh-select v-model="value"
                     placeholder="请选择"
                     :options="options"></rh-select>
        </div>
        <div class="input">
          <label>是否支持退货</label>
          <rh-select v-model="isReturn"
                     placeholder="请选择"
                     :options="options2"></rh-select>
        </div>
        <div class="input">
          <rh-button @click="addGoods">提交</rh-button>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <market-footer></market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketFooter from "@/components/common/MarketFooter"
import RhInput from '@/components/basic/rh-input'
import RhSelect from '@/components/basic/rh-select'
import RhButton from '@/components/basic/rh-button'
import RhUpload from '@/components/basic/rh-upload/rh-upload'
import $ from "jquery"
export default {
  components: {
    MarketHeader,
    MarketFooter,
    RhInput,
    RhSelect,
    RhButton,
    RhUpload
  },
  data () {
    return {
      objList: [],
      goodsName: '',
      goodsInfo: '',
      goodsLocation: '',
      goodsPrice: '',
      goodsOrigin: '',
      goodsTime: '',
      goodsAmount: '',
      options: [
        {
          value: '生活用品',
          label: '生活用品'
        },
        {
          value: '学习用品',
          label: '学习用品'
        },
        {
          value: '数码产品',
          label: '数码产品'
        },
        {
          value: '体育产品',
          label: '体育产品'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      value: '',
      options2: [
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ],
      isReturn: '',
      data: {}
    }
  },
  methods: {
    change (objList) {
      this.objList = objList;
    },
    addGoods () {
      const goods = {
        goodsName: this.goodsName,
        goodsInfo: this.goodsInfo,
        goodsLocation: this.goodsLocation,
        goodsPrice: this.goodsPrice,
        goodsOrigin: this.goodsOrigin,
        goodsImages: this.objList,
        goodsUser: localStorage.getItem('username'),
        goodsClassify: this.value,
        goodsTime: this.goodsTime,
        goodsAmount: this.goodsAmount,
        goodsReturn: this.isReturn
      }
      this.$http.post('http://localhost:3000/users/addGoods', goods).then(response => {
        if (response.data.status == 1) {
          alert(response.data.message);
        } else {
          alert(response.data.message);
          this.$router.go(-1);
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 100px auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 30px;
  height: 700px;
  display: flex;
  justify-content: space-between;

  .left {
    width: 420px;
    border: 1px solid #ccc;
  }
  .right {
    border: 1px solid #ccc;
    padding: 5px;

    .input {
      margin-bottom: 22px;
    }
    .rh-input {
      margin-left: 120px;
      width: 330px;
    }
    .rh-select,
    .rh-button {
      margin-left: 120px;
    }
    label {
      width: 120px;
      height: 40px;
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
  }
  img {
    width: 420px;
    height: 420px;
  }
}
</style>